<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmBiZvockIMhzrEaVPYe2mEx4-EsbUHEQ&sensor=true">
      </script>
    <script type="text/javascript">
      var oldMarker;
      function initialize() {
   	  latitude = window.cpjs.getLat();
      longitude = window.cpjs.getLng();
//	   latitude = 46;
//	   longitude = -60;
 
     var myLatLng = new google.maps.LatLng(latitude, longitude);
        var mapOptions = {
          center: myLatLng,
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
        placeMarker(myLatLng);
        google.maps.event.addListener(map, 'click', function(event) {
  	 		if(oldMarker){
  	 		oldMarker.setMap(null);
  	 		}
    		placeMarker(event.latLng);
    		window.cpjs.sendToAndroid(event.latLng.lat(),event.latLng.lng());
 });
      
 

function placeMarker(location) {
  	var marker = new google.maps.Marker({
      position: location,
      map: map
  });
  oldMarker=marker;
  }
  
//function centerAt(latitude, longitude){
//    myLatlng = new google.maps.LatLng(latitude,longitude);
//    map.panTo(myLatlng);
//  }
 
// function centerOld(latitude, longitude){ 
  // Creating a marker and positioning it on the map
//var marker = new google.maps.Marker({
//  position: new google.maps.LatLng(latitude, longitude), 
 // map: map
//});
//  oldMarker=marker;
//  }
}

 google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>